<template>
    <div class="showView">
        <BlogItem v-for="item in listArr" 
        :key="item.id"
        :itemObj="item"
        ></BlogItem>

        <div class="pageGroup">
            <div class="btn btnLeft" @click="btnLeft"> &lt; 上一页</div>
            <div class="btn btnRit" @click="btnRit"> 下一页 &gt;</div>
        </div>

        <div class="toast" v-if="showToast">
            数据加载中......
        </div>
    </div>
</template>
<script>
import BlogItem from './BlogItem.vue';
export default {
    created() {
        this.getData();
    },
    components:{
        BlogItem,
    },
    data() {
        return {
            listArr:[
                {title:"标题1",content:"内容1"},
                {title:"标题2",content:"内容2"},
                {title:"标题3",content:"内容3"},
                {title:"标题4",content:"内容4"}],
            page:"1",
            showToast:false,
            }
            
    },
    methods: {
        getData(){
            this.axios({
                url:'https://ku.qingnian8.com/dataApi/blog/showBlog.php',
                params:{
                    page:this.page,
                    // num:3,
                }

            }).then(res=>{
                console.log(res);
                this.listArr = res.data;
                this.showToast = false;
            })
            if (document.body.scrollTop) {
                document.body.scrollTop = 0;
            }else{
                document.documentElement.scrollTop = 0;
            }
        },
        btnRit(){
            if (this.listArr.length < 9 || this.listArr.length == 0) {
                alert("已经没有更多了")
                return
            }
            this.showToast = true;
            this.page++;
            this.getData();
        },
        btnLeft(){
            if(this.page == 1){
                alert("已经是第一页了")
                return
            }
            this.page--;
            this.showToast = true;
            this.getData();
        }
    },
}
</script>

<style lang="less" scoped>
.showView{
    padding:30px;
}
.pageGroup{
    display: flex;
    padding: 40px;
    // background: #ccc;
    justify-content: center;
    align-items: center;
    .btn{
        border: 1px solid #41b883;
        padding: 10px 20px;
        color: #41b883;
        font-size: 18px;
        margin: 0 10px;
        cursor: pointer;/**不懂这是干啥的 */
        &:hover{
            background: #41b883;
            color: #fff;
        }
    }
}
.toast{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>